<template>
  <div class="busStart-layout">
    <div class="card-progress-layout clearfix">
      <div class="card-progress-open fl">
        <h2 class="card-progress-title">{{busResult.openData.title}}</h2>
        <div class="progress-open-content">
          <div class="progress-open-top">
            <h2 class="progress-content-title">{{busResult.openData.openTitle}}</h2>
            <div class="progress-content-left">
              <p class="progress-content-txt">{{busResult.openData.imgSize}}</p>
              <div class="open-top-up">
                <div class="upFile">
                  <Button type="ghost">{{busResult.openData.upCardImg}}</Button>
                  <input type="file" class="ghost-file" @change="openCardImg" ref="cardUpload">
                </div>
                <div class="upload-img" v-if="cardImgFile !== null">{{busResult.openData.uping}}{{ cardImgFile.name }}
                  <img :src="cardImgSrc" class="card-img-look">
                </div>
                <div class="upload-img" v-if="imgLookSrc !== ''">历史上传的图片：
                  <img :src="imgLookSrc" class="card-img-look">
                </div>
              </div>
            </div>
          </div>
          <div class="progress-open-bottom">
            <h2 class="progress-content-title">{{busResult.openData.proTitle}}</h2>
            <div class="progress-content-left">
              <p class="progress-content-txt">
                <span class="progress-txt-left">{{busResult.openData.proStepOne}}</span>
                <span class="progress-txt-right">{{busResult.openData.proStepTwo}}</span>
              </p>
              <div class="open-content-inp">
                <Input v-model="protocolList.protocolTitle" :placeholder="busResult.openData.proInput"></Input>
              </div>
              <div class="open-bottom-up">
                <Button type="ghost" @click="toProtocol">{{busResult.openData.proBtn}}</Button>
              </div>
            </div>
          </div>
        </div>
        <div class="progress-open-look clearfix" v-if="false">
          <span class="open-look-icon fl"><Icon type="clipboard"></Icon></span>
          <span class="open-look-txt fl">{{busResult.openData.openLook}}
          <Icon type="ios-arrow-right"></Icon><Icon
              type="ios-arrow-right"></Icon></span>
        </div>
      </div>
      <div class="card-progress-close fl">
        <h2 class="card-progress-title">{{busResult.closeData.closeTitle}}</h2>
        <div class="progress-close-content">
          <div class="progress-close-head clearfix">
            <h2 class="progress-content-title fl">{{busResult.closeData.closeTime}}</h2>
            <div class="close-content-inp fl">
              <Input-number :min="0" size="large" v-model="closeTime"></Input-number>
            </div>
            <span class="close-content-day fl">{{busResult.closeData.timeUnit}}</span>
          </div>
          <p class="progress-content-txt">{{busResult.closeData.timeExplain}}</p>
        </div>
      </div>
    </div>
    <div class="bus-submit">
      <Button type="primary" @click="nextProgress">{{busResult.progressBtn}}</Button>
    </div>
    <Modal v-model="protocolModal" :title="protocolList.protocolTitle" @on-ok="getProtocolTxt('protocolList')"
           :class="'protocol-modal'" :mask-closable="false" :loading="loading">
      <div class="protocol-layout clearfix">
        <div class="progress-protocol-left fl">
          <Form ref="protocolList" :rules="protocolRules" :model="protocolList" :label-width="106">
            <Form-item prop="protocolTitle" label="协议标题：">
              <Input v-model="protocolList.protocolTitle" placeholder="请输入协议标题"></Input>
            </Form-item>
            <Form-item prop="company" label="公司名称：">
              <Input v-model="protocolList.company" placeholder="请输入公司名称"></Input>
            </Form-item>
            <Form-item prop="companyShort" label="公司简称：">
              <Input v-model="protocolList.companyShort" placeholder="请输入公司简称"></Input>
            </Form-item>
            <Form-item prop="cardName" label="卡片名称：">
              <Input v-model="protocolList.cardName" placeholder="请输入电子公交卡片名称"></Input>
            </Form-item>
            <Form-item prop="telephone" label="客服电话：">
              <Input v-model="protocolList.telephone" placeholder="请输入客服电话"></Input>
            </Form-item>
          </Form>
        </div>
        <busProtocol></busProtocol>
      </div>
    </Modal>
  </div>
</template>
<script>
  /* import qs from 'qs' */
  import busProtocol from './son/busProtocol.vue'
  import { mapState, mapActions } from 'vuex'

  export default {
    data () {
      return {
        dataId: JSON.parse(sessionStorage.getItem('dataId')),
        // v-model数据
        closeTime: 0,
        protocolModal: false,
        loading: true,
        // 文件数据
        cardImgFile: null,
        cardImgSrc: '',
        imgLookSrc: '',
        // 协议验证
        protocolRules: {
          protocolTitle: [
            {required: true, message: '请输入协议标题', trigger: 'blur'}
          ],
          company: [
            {required: true, message: '请输入公司名称', trigger: 'blur'}
          ],
          companyShort: [
            {required: true, message: '请输入公司简称', trigger: 'blur'}
          ],
          cardName: [
            {required: true, message: '请输入卡片名称', trigger: 'blur'}
          ],
          telephone: [
            {required: true, message: '请输入客服电话', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState('bus', ['busResult', 'protocolList'])
    },
    components: {busProtocol},
    props: [],
    created () {
      // 第一步： 获取用户配置信息
      let openData = JSON.parse(sessionStorage.getItem('openData'))
      if (openData) {
        this.closeTime = openData.closeTime
        this.imgLookSrc = openData.imgLookSrc
        this.protocolList.protocolTitle = openData.protocolList.protocolTitle
        this.protocolList.company = openData.protocolList.company
        this.protocolList.companyShort = openData.protocolList.companyShort
        this.protocolList.cardName = openData.protocolList.cardName
        this.protocolList.telephone = openData.protocolList.telephone
      } else {
        this.getOpenData()
      }
      // 第二步: 填写并校验信息
      let protocolData = JSON.parse(sessionStorage.getItem('protocolList'))
      if (protocolData) {
        this.protocolList.protocolTitle = protocolData.protocolTitle
        this.protocolList.company = protocolData.company
        this.protocolList.companyShort = protocolData.companyShort
        this.protocolList.cardName = protocolData.cardName
        this.protocolList.telephone = protocolData.telephone
      }
      // 第三步： 提交并保存信息
    },
    methods: {
      ...mapActions('bus', ['busSubmit']),
      // 获取用户配置信息
      getOpenData () {
        let url = this.api.bus.getOpen
        console.log(this.dataId)
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000') {
            if (res.data.data) {
              let openData = res.data.data
              this.closeTime = openData.approvalTime
              let protocolData = JSON.parse(openData.agreementTxt)
              this.protocolList.protocolTitle = protocolData.protocolTitle
              this.protocolList.company = protocolData.company
              this.protocolList.companyShort = protocolData.companyShort
              this.protocolList.cardName = protocolData.cardName
              this.protocolList.telephone = protocolData.telephone
              this.imgLookSrc = openData.list[0].url
              let sessionOpenData = {
                protocolList: this.protocolList,
                imgLookSrc: this.imgLookSrc,
                closeTime: this.closeTime
              }
              sessionStorage.setItem('openData', JSON.stringify(sessionOpenData))
            } else {
              this.$Message.error({content: '请配置相关信息', duration: 5})
            }
          } else if (res.data.msg.code === '40001') {
            this.$Message.error({content: '请配置相关信息', duration: 5})
          } else {
            this.$Message.error({content: res.data.msg.message, duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      // 获取用户选择图片信息
      openCardImg () {
        let len = this.$refs.cardUpload.files.length
        if (len === 1) {
          this.cardImgFile = this.$refs.cardUpload.files[0]
          var reader = new FileReader()
          reader.readAsDataURL(this.cardImgFile)
          let that = this
          reader.onload = function () {
            that.cardImgSrc = this.result
          }
        } else {
          this.cardImgFile = null
        }
      },
      // 编辑协议数据
      toProtocol () {
        if (this.protocolList.protocolTitle) {
          this.protocolModal = true
        } else {
          this.$Message.info('请编辑协议标题')
        }
      },
      getProtocolTxt (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            sessionStorage.setItem('protocolList', JSON.stringify(this.protocolList))
            this.$Message.success('提交中。。。')
            setTimeout(() => {
              this.protocolModal = false
            }, 2000)
          } else {
            this.$Message.error('表单验证失败!')
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 1)
          }
        })
      },
      nextProgress () {
        let protocolState = this.protocolList.protocolTitle &&
          this.protocolList.company &&
          this.protocolList.companyShort &&
          this.protocolList.cardName &&
          this.protocolList.telephone
        let dataState = this.cardImgFile && protocolState
        if (dataState) {
          this.$Message.success('提交中。。。')
          let params = new FormData()
          params.append('files', this.cardImgFile)
          params.append('alipayClientId', this.dataId)
          params.append('approvalTime', this.closeTime)
          params.append('agreementTxt', JSON.stringify(this.protocolList))
          let obj = {
            params: params,
            mes: this.$Message
          }
          this.busSubmit(obj)
        } else {
          if (!this.cardImgFile) {
            this.$Message.error('请选择图片')
          } else if (!protocolState) {
            this.$Message.error('请填写协议字段')
          }
        }
      }
    }
  }
</script>
